<template>
    <div class="language-shadow" @click="closeLanguageSelector" v-show="show_language_selector">
        <div class="language" @click.stop="">
            <div class="header">
                <div class="title">Language</div>
                <div class="exit-btn" @click="closeLanguageSelector"></div>
            </div>
            <div class="body">
                <div class="language-list">
                    <div class="language-item" v-for="(item, index) in all_languages" :key="item.id" @click="changeLanguage(index)">
                        <div class="img" :style="`--img: url(${ item.icon });`"></div>
                        <div class="text" :style="`color: ${ item.id == language.id ? 'var(--active-color)' : 'var(--text-color)' }; font-weight: ${ item.id == language.id ? '600' : '400' };`">{{ item.name }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { show_language_selector, closeLanguageSelector, changeLanguage, all_languages, language } from '@/service/language';
</script>

<style scoped lang="less">
.language-shadow {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #88888880;

    .language {
        width: 30vw;
        height: 25vw;
        background-color: #fff;
        border-radius: 0.5vw;
        display: flex;
        flex-direction: column;

        .header {
            box-sizing: border-box;
            width: 100%;
            height: 3vw;
            padding: 1vw;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 0.1vw solid var(--border-color);

            .title {
                font-size: 1vw;
                font-weight: 600;
                color: var(--text-color);
            }

            .exit-btn {
                --size: 1vw;
                --line-width: 0.1vw;
                width: var(--size);
                height: var(--size);
                cursor: pointer;
                position: relative;

                &::before, &::after {
                    content: "";
                    display: block;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%) rotate(45deg);
                }

                &::before {
                    width: var(--line-width);
                    height: 100%;
                    background-color: var(--text-color);
                }

                &::after {
                    width: 100%;
                    height: var(--line-width);
                    background-color: var(--text-color);
                }
            }
        }

        .body {
            box-sizing: border-box;
            width: 100%;
            flex: 1;
            padding: 2vw;

            .language-list {
                width: 100%;
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 1vw;

                .language-item {
                    display: flex;
                    align-items: center;
                    margin: 0.5vw 0;
                    gap: 0.5vw;
                    cursor: pointer;

                    .img {
                        --w: 1vw;
                        --h: 1vw;
                        border-radius: 50%;
                    }

                    .text {
                        font-size: 0.8vw;
                    }
                }
            }
        }
    }
}

@media (max-aspect-ratio: 16/9) {
    .language-shadow {
        .language {
            width: 40vw;
            height: 35vw;
            border-radius: 0.65vw;

            .header {
                height: 4vw;
                padding: 1.5vw;

                .title {
                    font-size: 1.3vw;
                }

                .exit-btn {
                    --size: 1.2vw;
                }
            }

            .body {
                padding: 2.25vw;

                .language-list {
                    gap: 1vw;

                    .language-item {
                        margin: 1vw 0;
                        gap: 1vw;

                        .img {
                            --w: 1.5vw;
                            --h: 1.5vw;
                        }

                        .text {
                            font-size: 1vw;
                        }
                    }
                }
            }
        }
    }
}

@media (max-aspect-ratio: 4/3) {
    .language-shadow {
        .language {
            width: 55vw;
            height: 45vw;
            border-radius: 0.8vw;

            .header {
                height: 5vw;
                padding: 1.8vw;

                .title {
                    font-size: 1.7vw;
                }

                .exit-btn {
                    --size: 1.5vw;
                }
            }

            .body {
                padding: 2.5vw;

                .language-list {
                    gap: 1vw;

                    .language-item {
                        .img {
                            --w: 2vw;
                            --h: 2vw;
                        }

                        .text {
                            font-size: 1.5vw;
                        }
                    }
                }
            }
        }
    }
}

@media (max-aspect-ratio: 1/1) {
    .language-shadow {
        .language {
            width: 70vw;
            height: 60vw;
            border-radius: 1vw;

            .header {
                height: 7vw;
                padding: 2.5vw;

                .title {
                    font-size: 2vw;
                }

                .exit-btn {
                    --size: 1.8vw;
                }
            }

            .body {
                padding: 3vw;

                .language-list {
                    .language-item {
                        margin: 1.5vw 0;
                        gap: 1vw;

                        .img {
                            --w: 2.5vw;
                            --h: 2.5vw;
                        }

                        .text {
                            font-size: 1.9vw;
                        }
                    }
                }
            }
        }
    }
}

@media (max-aspect-ratio: 3/4) {
    .language-shadow {
        .language {
            width: 75vw;
            height: 85vw;
            border-radius: 1.5vw;

            .header {
                height: 10vw;
                padding: 4vw;

                .title {
                    font-size: 3vw;
                }

                .exit-btn {
                    --size: 2.5vw;
                }
            }

            .body {
                padding: 3.5vw;

                .language-list {
                    gap: 3vw;

                    .language-item {
                        margin: 2vw 0;
                        gap: 1.5vw;

                        .img {
                            --w: 3.5vw;
                            --h: 3.5vw;
                        }

                        .text {
                            font-size: 2.5vw;
                        }
                    }
                }
            }
        }
    }
}

@media (max-aspect-ratio: 9/16) {
    .language-shadow {
        .language {
            width: 85vw;
            height: 160vw;
            border-radius: 2vw;

            .header {
                height: 15vw;
                padding: 5vw;

                .title {
                    font-size: 4vw;
                }

                .exit-btn {
                    --size: 3.5vw;
                }
            }

            .body {
                padding: 4vw;

                .language-list {
                    grid-template-columns: repeat(2, 1fr);
                    gap: 3.5vw;

                    .language-item {
                        margin: 4vw 0;
                        gap: 1.5vw;

                        .img {
                            --w: 5vw;
                            --h: 5vw;
                        }

                        .text {
                            font-size: 3.5vw;
                        }
                    }
                }
            }
        }
    }
}
</style>